<!-- 用户管理 -->
<template>
    <div>
        <div class="ls-User__centent ls-card m-t-16">
            <div class="pane-header table-toolbar">
                <el-button type="text" size="small" slot="trigger" @click="refresh">刷新 </el-button>
                <el-button type="primary" size="small" slot="trigger" @click="openDrawer">添加剧情 </el-button>
                <el-button size="small" type="primary" @click="$router.push('/vision/videoepisodebatchadd/'+id)">批量添加剧情</el-button>
            </div>
            <MyTable ref="my_table"  :query-params="queryParams" :columns="columns" :list-api="tableListApi">
                <template v-slot:image="{ row }">
                    <div class="flex">
                        <el-image :src="row.image" style="width: 34px; height: 34px"></el-image>
                    </div>
                </template>
            </MyTable>
            <MyDrawer v-if="myDrawerVisible" :title="drawerTitle" :mode="mode" :visible.sync="myDrawerVisible" @submit="submit">
                <VideoEpisodeAdd
                    lazy
                    ref="my_video_detail"
                    c-type="dialog"
                    v-model="formInfo"
                    :video-id.sync="id"
                    :distribution-level-ids="localDistributionLevelIds"
                    :mode="mode"
                    :edit-info="formInfo"
                    :visible.sync="myDrawerVisible"
                    @success="detailsSuccessHandler"
                ></VideoEpisodeAdd>
            </MyDrawer>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Ref, Watch } from 'vue-property-decorator'
import { Mutation } from 'vuex-class'
import { joinVideoEpisodelist, delvisilist, joinVideoEpisodeDel } from '@/api/visionapi/index'
import LsDialog from '@/components/ls-dialog.vue'
import { PageMode } from '@/utils/type'
import MyTable from '@/components/MyTable/MyTableIndex.vue'
import MyDrawer from '@/components/MyDrawer/MyDrawerIndex.vue'
import VideoEpisodeAdd from './episode_add.vue'
import { STATIC_INFO } from './const'
import { IVideoEpisodeEditForm } from './video.interface'
interface IFromInfo {
    key: string
    value?: any
}
interface IQueryParams {
    video_id: string
}
@Component({
    components: {
        LsDialog,
        MyTable,
        MyDrawer,
        VideoEpisodeAdd
    }
})
export default class VideoEpisode extends Vue {
    @Ref() readonly my_video_detail!: VideoEpisodeAdd
    @Ref() readonly my_table!: MyTable
    @Prop({default: ''}) id!: String
    @Prop({default: '[]'}) distribution_level_ids!: string
    @Mutation('details/setFromInfoItem') setFromInfoItem!: (params: IFromInfo) => void
    
    queryParams: IQueryParams = {
        video_id: ''
    }
    selectIds: any[] = []
    listdata = []
    tableListApi: any = joinVideoEpisodelist
    columns = [
        {
            prop: 'id',
            label: 'ID'
        },
        {
            prop: 'image',
            label: '图片',
            scopedSlots: { customRender: 'image' }
        },
        {
            prop: 'title',
            label: '名称'
        },
        {
            prop: 'sort',
            label: '排序'
        },
        {
            prop: 'price',
            label: '普通会员价',
            width: 100
        },
        {
            prop: 'vip_price',
            label: 'vip会员价',
            width: 100
        },
        {
            prop: 'type',
            label: '类型',
            width: 80,
            formatData: function (val: string | number) {
                let retValue = ''
                // 类型:1视频 2音频 3文章
                switch (String(val)) {
                    case "1":
                        retValue = "视频"
                        break;
                    case "2":
                        retValue = "音频"
                        break;
                    case "3":
                        retValue =  "文章"
                        break;   
                    default:
                        retValue = ''

                }
                return retValue
            }
        },
        {
            prop: 'is_show',
            label: '状态',
            width: 80,
            formatData: function (val: string | number) {
                return val == 1 ? '显示' : '隐藏'
            }
        },
        {
            prop: 'operation',
            label: '操作',
            width: 180,
            operation: [
                { name: '编辑', type: 'text', clickFun: this.saveInfo },
                { name: '删除', type: 'danger', clickFun: this.onDelEpisodeHandler }
            ]
        }
    ]
    mode: string = PageMode.ADD
    myDrawerVisible: Boolean = false
    formInfo: IVideoEpisodeEditForm | null = null
    localDistributionLevelIds: any[] = []
    get drawerTitle () {
        return this.mode === PageMode.ADD ? "添加剧集" : "编辑剧集"
    }
    get distributionLevelIds () {
       return this.initLevelIds()
    }
    get disabledBtn() {
        return !this.selectIds.length
    }
    created() {
        this.queryParams = {
            video_id: String(this.id)
        }
        this.initLevelIds()
    }
    
    initLevelIds() {
        const vm = this
        let retVal:any = []
        try {
            retVal = JSON.parse(vm.distribution_level_ids)

            if (!retVal || !Array.isArray(retVal) || !retVal.length){
                const idsStr: any = this.$route.query && this.$route.query.distribution_level_ids
                retVal = JSON.parse(idsStr)
            }
        } catch (error) {
            retVal = []
        }
        this.localDistributionLevelIds = [...retVal]
        return retVal
    }
    
    refresh(callback: Function | any) {
        if (callback && typeof callback === 'function') {
            callback()
            return
        }
         // @ts-ignore
        if (this.my_table && this.my_table.refresh) {
            // @ts-ignore
            this.my_table.refresh()
        }

       
    }
    setEditInfo() {}
    openDrawer() {
        this.mode = PageMode.ADD
        this.localDistributionLevelIds = [...this.distributionLevelIds]
        this.myDrawerVisible = true
    }
    detailsSuccessHandler() {
        this.mode = PageMode.ADD
        this.myDrawerVisible = false
        // @ts-ignore
        if (this.my_table && this.my_table.refresh) {
            // @ts-ignore
            this.my_table.refresh()
        }
        
    }

    // 添加视频
    addlist() {
        this.$router.push({
            name: 'videoDetail',
            query: {
                mode: PageMode.ADD
            }
        })
    }
    saveInfo(row: any) {
        this.formInfo = row
        this.mode = PageMode.EDIT
        let video_distribution_level = row.video_distribution_level || []
        if (video_distribution_level && Array.isArray(video_distribution_level) && video_distribution_level.length) {
            this.localDistributionLevelIds = [...video_distribution_level]
        } else {
            this.localDistributionLevelIds = [...this.distributionLevelIds]
        }
        this.myDrawerVisible = true
       
    }
    // 删除视频
    onDelEpisodeHandler(row: any, index: Number, callback: Function) {
        const id = row.id
        this.$confirm('是否确认删除该短剧?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                joinVideoEpisodeDel({
                    ids: [id]
                })
                    .then(() => {
                        this.$message.success('删除成功!')
                        callback()
                    })
                    .catch(() => {
                        this.$message.success('删除失败!')
                    })
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
    }
    submit() {
        if (this.my_video_detail && this.my_video_detail.onSubmit) {
            this.my_video_detail.onSubmit()
        }
    }
}
</script>

<style lang="scss" scoped>
.table-toolbar {
    margin-bottom: 20px;
}
.user-management {
    .ls-user__top {
        padding: 16px 24px;
    }
}
</style>
